<script setup lang="ts">
import defaultSettings from '~/setting'
import { useAppStore, useSettingsStore } from '~/stores'
import { ThemeEnum } from '~/enums/ThemeEnum'

const appStore = useAppStore()
const { locale, size } = storeToRefs(appStore)
const { toggleDevice, closeSideBar, openSideBar } = appStore
const width = useWindowSize().width
const WIDTH = 992 // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
watchEffect(() => {
  if (width.value < WIDTH) {
    toggleDevice('mobile')
    closeSideBar()
  }
  else {
    toggleDevice('desktop')

    if (width.value >= 1200)
      openSideBar()
    else
      closeSideBar()
  }
})

const settingsStore = useSettingsStore()
const { watermarkEnabled } = storeToRefs(settingsStore)

// 明亮/暗黑主题水印字体颜色适配
const fontColor = computed(() => {
  return settingsStore.theme === ThemeEnum.DARK
    ? 'rgba(255, 255, 255, .15)'
    : 'rgba(0, 0, 0, .15)'
})
</script>

<template>
  <el-config-provider :locale="locale" :size="size">
    <!-- 开启水印 -->
    <el-watermark
      v-if="watermarkEnabled"
      :font="{ color: fontColor }"
      :content="defaultSettings.watermarkContent"
      class="wh-full"
    >
      <RouterView />
    </el-watermark>

    <!-- 关闭水印 -->
    <RouterView v-else />
  </el-config-provider>
</template>
